import {observable, set, autorun, entries, keys, values, toJS,trace} from 'mobx'
import {observer} from "mobx-react";
import React, {Component} from 'react';


const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
});
autorun(() => {
    // 虽然只使用了person这个引用，但是entries等会访问person的内部属性，他们是observable的，所以会更新
    console.log(entries(person))
    console.log(keys(person))
    console.log(values(person))
    console.log(toJS(person))
    // person是一个变量，只保存了observable的地址，不是响应的
    // console.log(person);
    trace() 
})
@observer class tmp extends Component {
    componentDidMount() {
        setTimeout(() => {
            person.firstName = 'yang'
        }, 2000)

        setTimeout(() => {
            // 使用mobx的set对observable object修改或新增属性
            set(person, { "fullName" : "test fullName"})
            set(person, { "firstName" : "dechao"})
            // 以下不是响应的
            person.new = 1
        }, 3000)
    }

    render(){
        return (
            <div>
                {/* <p>{Object.keys(person).map(v => `${v}: ${person[v]}`).join(' | ')}</p> */}
                <p>{entries(person).map(v => `${v[0]}: ${v[1]}`).join(' | ')}</p>
            </div>
        )
    }
}

export default tmp